<template>
  <div class="navbar">
    <div class="box-container">
      <img src="../assets/img/header/back.png"
           style="cursor:pointer;width:20px;height:20px"
           v-if="!barflag"
           @click="setside">
      <img src="../assets/img/header/back2.png"
           style="cursor:pointer;width:20px;height:20px"
           v-else
           @click="setside">
      <img :src="user.avatar||avator"
           style="border-radius:50%;">
      <div class="boxc-name">
        <span>{{user.nickName}}</span>
        <div>上次登录时间：{{user.loginDate}}</div>
      </div>
    </div>
    <div class="right-menu">
      <template v-if="device">
        <div class="right-box"
             @click="gonotice">
          <img src="../assets/common/info.png"
               title="公告">
          <span v-if="false">0</span>
        </div>
        <div class="right-box"
             @click="setphone">
          <img slot="reference"
               src="../assets/common/phone.png"
               title="拨打电话">
        </div>
        <div class="right-box"
             @click="broadcast">
          <img src="../assets/common/mine.png"
               title="个人信息">
        </div>
        <div class="right-box">
          <img src="../assets//common/right1.png"
               title="退出登录"
               @click="logout()">
        </div>
      </template>
    </div>
    <el-dialog title="联系电话"
               :visible="phone.length>0"
               :before-close="closedia"
               append-to-body>
      <div class="alog">
        <p><span>*</span>联系电话</p>
        <div>{{phone}}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data () {
    return {
      video: false,
      width: 30,
      device: true,
      user: {},
      avator: require('../assets/img/user.png'),
      notice: {},
      phone: '',
      barflag: false
    }
  },
  mounted () {
    this.barflag = this.$root.barflag;
    this.init();
  },
  methods: {
    init () {
      this.$getRequest('/getInfo', {}).then((res) => {
        if (res.code == 200) {
          this.user = res.user
        }
      })
    },
    async logout () {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$getRequest('/logout', {}).then((res) => {
          if (res.code == 200) {
            if (this.$root.goEasy) {
              this.$root.goEasy.disconnect();
            }
            sessionStorage.clear()
            document.body.style.overflow = 'auto'
            this.$router.push('/login')
          }
        })
      })
    },
    setside () {
      this.barflag = !this.barflag;
      this.$root.barflag = !this.$root.barflag
    },
    broadcast () {
      this.$router.push('/personal')
    },
    gonotice () {
      var href = window.location.href;
      var is = href.indexOf('notice') == -1;
      if (is) {
        this.$router.push('/notice')
      }
    },
    setphone () {
      this.$postRequest('/mall/shopExtract/platPhone', {}).then((res) => {
        if (res.code == 200) {
          this.phone = res.data.phone
        }
      })
    },
    closedia () {
      this.phone = ''
    }
  }
}
</script>

<style scoped>
.navbar {
  width: 100%;
  height: 70px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .box-container .hamburger-container {
  line-height: 46px;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-container > img {
  width: 40px;
  height: 40px;
  margin-left: 20px;
  padding: 5px 0;
  display: block;
}
.boxc-name {
  margin-left: 20px;
}
.boxc-name > span {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
}
.boxc-name > div {
  font-size: 12px;
  color: #000000;
}
.breadcrumb-container {
  float: left;
}
.notice-box {
  width: 500px;
  height: 30px;
  background: #919cad;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.notice-box img {
  width: 17px;
  height: 15px;
  margin: 0 32px 0 20px;
}
.notice-box div {
  width: calc(100% - 80px);
  line-height: 30px;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;
  display: flex;
  align-items: center;
}
.right-box {
  width: 30px;
  height: 30px;
  margin: 0 30px 0 0;
  position: relative;
}
.right-box img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}
.right-box span {
  display: block;
  height: 15px;
  background: #e60012;
  border-radius: 8px;
  padding: 0 5px;
  position: absolute;
  top: -7px;
  right: -15px;
  line-height: 15px;
  color: #ffffff;
}
.right-box1 {
  height: 60px;
  margin: 0 30px 0 0;
  display: flex;
  align-items: center;
}
.right-box1 div {
  margin: 0 30px 0 0;
  line-height: 70px;
}
.right-menu-item {
  display: inline-block;
  padding: 0 8px;
  height: 100%;
  font-size: 18px;
  color: #5a5e66;
  vertical-align: text-bottom;
}

.avatar-container {
  margin-right: 30px;
}
.avatar-container .avatar-wrapper {
  margin-top: 5px;
  position: relative;
}
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.el-icon-caret-bottom {
  cursor: pointer;
  position: absolute;
  right: -20px;
  top: 25px;
  font-size: 12px;
}
</style>
